<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Example</title>
  <style>
  pre {
    border: medium double black;
  }
  img {
    width: 200px;
  }
  </style>
</head>

<body>
  <pre id="results"></pre>
  <img id="apple" src="banana.jpg">
  <p>There are lots of different kinds of fruit - there are over 500 varieties of banana alone.</p>
  <p>One of the most interesting aspects of fruit is the variety available in each country.</p>
  <img id="banana" src="banana.jpg" alt="banana">
  <script>
  var resultsElement = document.getElementById("results");

  var elems = document.images;

  for (var i = 0; i < elems.length; i++) {
    resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n";
  }

  var srcValue = elems.namedItem("apple").src;
  resultsElement.innerHTML += "Src for apple element is: " + srcValue + "\n";
  </script>
</body>

</html>
